<template>
  <div>
    <headerNav></headerNav>
    <div class="condition">
      <div class="condition_title mincard">
        <span @click="$router.push('/')">首页</span>>
        <span>企业对比</span>
      </div>
      <div class="condition_search">
        <div class="condition_search_content">
          <div class="condition_search_content_content">
            <input
              type="text"
              placeholder="请输入你要添加的公司"
              @input="queryEnterprise"
              v-model="enterpriseValue"
            />
            <span @click="addEnterprise(-1)">添加</span>
            <ul class="condition_search_content_content_uls" v-if="queryData.length > 0">
              <li
                v-for="(item, index) in queryData"
                @click="addEnterprise(index, item.companyName)"
                :key="index"
                v-html="item.companyName"
              ></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 没有数据 -->
      <div class="condition_content">
        <div class="condition_content_notYet" v-if="enterpriseData.length == 0">
          <img src="../../../static/image/enterpriseCompared.jpg" alt />
          <!--          <p>请输入你要对比的企业名称</p>-->
        </div>
        <!-- 有数据 -->
        <div class="condition_content_content" v-if="enterpriseData.length > 0">
          <div class="condition_content_content_title">
            <img src="../../assets/PolicyDataCenter.png" alt />
            <h3>已选对比企业</h3>
          </div>
          <div class="condition_content_content_content">
            <div
              class="condition_content_content_content_content"
              v-for="(item, index) in enterpriseData"
              :key="index"
            >
              <!-- 待解决 -->
              <p class="singlerows">{{ disposeText(item.companyName) }}</p>
              <!-- <p class="singlerows">{{ newText }}</p> -->
              <img src="../../assets/qicha.png" alt @click="deleteEnterprise(index)" />
            </div>
          </div>
          <div class="condition_content_content_bottom">
            <div class="condition_content_content_bottom_content">
              <span @click="start">开始对比</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 登录弹窗 -->
      <login-dialog ref="login" @reload="reload"></login-dialog>
      <!-- 查询已满 -->
      <el-dialog
        :visible.sync="dialogVisible"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="30%"
        :before-close="handleClose"
      >
        <template #footer>
          <div class="contents_qydb">
            <div class="imgs_qydb">
              <img src="@/static/image/cwhyts2.png" alt />
            </div>
            <div class="goVip">
              <div class="top">可对比数量已满</div>
              <div class="bn">成为VIP会员畅享更多权益</div>
            </div>
            <div class="option">
              <span class="spans_qydb" @click="dialogVisible = false">再用看看</span>
              <p class="ps_qydb" @click="hanldClick">升级VIP</p>
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
    <navigation></navigation>
    <footerNav></footerNav>
  </div>
</template>

<script>
import { commonRequest, postRequest } from "../../api/api.js";
import { sessionDeposit, sessionTake } from "../../util/validate.js";
import loginDialog from "../../components/login_item/LoginDialog"; //登录弹窗
import { mapActions } from "vuex";

export default {
  name: "condition",
  components: {
    loginDialog
  },
  head() {
    return {
      title: "企业对比-比目镜",
      meta: [
        { hid: "keywords", name: "keywords", content: "企业对比" },
        {
          hid: "description",
          name: "description",
          content: "输入企业名称，进行企业对比"
        }
      ]
    };
  },
  data() {
    return {
      dialogVisible: false,
      enterpriseValue: "", // 搜索框关键字
      // 添加企业
      enterpriseData: [],
      // 匹配企业计时器
      queryTime: null,
      // 匹配到的企业
      queryData: [],
      // 企业id
      judgeId: []
    };
  },
  mounted() {
    let token = localStorage.getItem("saasToken");
    if (!token) {
      this.$refs.login.open();
    }
    var that = this;
    var initialData = JSON.parse(sessionTake("enterpriseComparison"));
    if (initialData != null && initialData != undefined) {
      that.enterpriseData = initialData;
      for (let i = 0; i < initialData.length; i++) {
        that.judgeId.push(initialData[i].companyId);
      }
    }
    if (that.$route.query.id != undefined) {
      var id = this.$route.query.id;
      commonRequest("/api/cms/cmsCompany/getCompanyInfo", { id }).then(res => {
        // console.log(res);
        // 未登录的情况下,解决企业对比报错
        if (res.code) {
          if (that.judgeId.indexOf(res.result.companyId) === -1) {
            that.enterpriseData.push(res.result);
            that.judgeId.push(res.result.companyId);
          }
        } else {
          if (that.judgeId.indexOf(res.companyId) === -1) {
            that.enterpriseData.push(res);
            that.judgeId.push(res.companyId);
          }
        }
      });
    }
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    // 匹配企业
    queryEnterprise() {
      var that = this;
      if (that.enterpriseValue == "") {
        that.queryData = "";
        return;
      } else {
        postRequest("/api/es/company/query.json", {
          companyName: that.enterpriseValue,
          pageIndex: 0,
          area: "",
          city: "",
          companyId: "",
          endLat: 0,
          endLng: 0,
          pageSize: 10,
          province: "",
          startLat: 0,
          startLng: 0
        }).then(res => {
          // console.log(res);
          if (res.retCode == 0) {
            this.changeText(
              res.data.content,
              "companyName",
              this.enterpriseValue
            );
            that.queryData = res.data.content;
          }
        });
      }
    },
    // 处理文字样式
    disposeText(val) {
      // val.forEach((el) => {
      // console.log(el);
      return val.replace(/<[^>|]*>/g, "");
      // });
    },
    // 升级vip页
    hanldClick() {
      window.open("/pageVIP", "_blank");
    },
    // 添加企业
    addEnterprise(index) {
      var that = this;
      if (index == -1) {
        postRequest("/api/es/company/query.json", {
          companyName: that.enterpriseValue,
          pageIndex: 0,
          area: "",
          city: "",
          companyId: "",
          endLat: 0,
          endLng: 0,
          pageSize: 10,
          province: "",
          startLat: 0,
          startLng: 0
        }).then(res => {
          if (that.enterpriseValue != "") {
            if (
              res.data.content.length > 0 &&
              res.data.content[0].companyName == that.enterpriseValue
            ) {
              if (that.enterpriseData.length >= 5) {
                this.$message({
                  message: "最多添加5家公司",
                  type: "warning"
                });
              } else {
                if (that.judgeId.indexOf(res.data.content[0].companyId) == -1) {
                  that.enterpriseData.push(res.data.content[0]);
                  that.judgeId.push(res.data.content[0].companyId);
                  that.enterpriseValue = "";
                  that.queryData = [];
                } else {
                  this.$message({
                    message: "已添加过该企业",
                    type: "success"
                  });
                }
              }
            } else if (res.data.content.lenth == 0) {
              this.$message({
                message: "未匹配到相关企业",
                type: "warning"
              });
            }
          } else if (that.enterpriseValue == "") {
            this.$message.error("企业名称不能为空");
            return;
          }
        });
      } else {
        if (that.enterpriseData.length >= 5) {
          this.$message.warning({
            message: "最多添加5家公司",
            type: "warning"
          });
        } else {
          if (that.judgeId.indexOf(that.queryData[index].companyId) == -1) {
            that.enterpriseData.push(that.queryData[index]);
            that.judgeId.push(that.queryData[index].companyId);
            that.enterpriseValue = "";
            that.queryData = [];
          } else {
            this.$message.warning({
              message: "已添加过该企业",
              type: "warning"
            });
          }
        }
      }
    },
    // 删除已添加企业
    deleteEnterprise(index) {
      this.enterpriseData.splice(index, 1);
      this.judgeId.splice(index, 1);
      sessionDeposit(
        "enterpriseComparison",
        JSON.stringify(this.enterpriseData)
      );
    },
    // 开始对比
    start() {
      if (this.enterpriseData.length < 2) {
        this.$message.warning({
          message: "至少选择两家公司才能进行对比哦~",
          type: "warning"
        });
        return;
      }
      commonRequest("/api/userInfo").then(res => {
        // console.log(res);
        if (res.code == 10001) {
          // 登录失效
          this.$refs.login.open();
        } else if (res.result.companyContrastNumber == 0) {
          this.dialogVisible = true;
        } else {
          this.enterpriseData.forEach(el => {
            // console.log();
            el.companyName = this.disposeText(el.companyName);
          });
          // console.log(this.enterpriseData);

          sessionDeposit(
            "enterpriseComparison",
            JSON.stringify(this.enterpriseData)
          );
          window.open("/comparisonDetails", "_blank");
        }
      });
    },
    handleClose() {},
    // 关键字标明红色
    changeText(result, key, val) {
      if (val != "") {
        // console.log(result, key, val);
        let arr = val.split("");
        let old = [];
        arr.forEach(el => {
          old.push(el);
        });
        let arrText = [];
        // console.log(arr);
        result.forEach((el, index) => {
          el[key].split("").forEach(el1 => {
            arr.forEach(val => {
              if (val.indexOf(el1) !== -1) {
                // console.log(el1);
                el[key] = el[key].replace(
                  new RegExp(el1, "g"),
                  `<em style=color:red;font-style:normal;>${el1}</em>`
                );
              }
            });
          });
        });
        return result;
      }
    }
  }
};
</script>
<style lang="less">
.contents_qydb {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin-top: 20px;

  .imgs_qydb {
    width: 200px;

    img {
      width: 100%;
    }
  }

  .goVip {
    width: 100%;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}

.el-dialog__footer {
  height: 340px;
  position: relative;
}

.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;

    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
  }
}

.el-dialog {
  border-radius: 10px;
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}
</style>
<style lang="less" scoped>
/* 登录框的样式修改 */
/deep/ .el-dialog__footer {
  height: 310px;
}

.condition_title {
  width: 1200px;
  margin: 0 auto;

  font-size: 14px;
  color: #333;

  span {
    font-size: 14px;
    margin: 0px 10px;
    cursor: pointer;
  }
}

.condition_search {
  background-color: #fff;

  .condition_search_content {
    width: 1200px;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;

    .condition_search_content_content {
      display: inline-block;
      position: relative;

      &:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }

      input {
        float: left;
        width: 670px;
        height: 60px;
        box-sizing: border-box;
        border: 2px solid #44a2ff;
        border-radius: 8px 0 0 8px;
        font-size: 18px;
        padding: 0 20px;

        &::-webkit-input-placeholder {
          font-size: 16px;
          color: #999;
        }
      }

      span {
        float: left;
        width: 120px;
        line-height: 60px;
        text-align: center;
        background: #44a2ff;
        border-radius: 0px 8px 8px 0px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
      }

      .condition_search_content_content_uls {
        position: absolute;
        top: 60px;
        left: 0;
        width: 670px;
        background-color: #fff;
        border: 1px solid #eee;
        box-sizing: border-box;
        z-index: 1;

        li {
          text-align: left;
          padding: 8px 20px;
          border-bottom: 1px solid #eee;
          font-size: 12px;
          cursor: pointer;
        }
      }
    }
  }
}

.condition_content {
  width: 1200px;
  margin: 0 auto;

  .condition_content_notYet {
    padding: 60px 0 140px 0;
    text-align: center;

    img {
      width: 80%;
      margin: 20px auto;
    }

    p {
      font-size: 16px;
      text-align: center;
      color: #999999;
    }
  }

  .condition_content_content {
    padding-bottom: 160px;

    .condition_content_content_title {
      line-height: 100px;

      img {
        display: inline-block;
        margin-right: 20px;
      }

      h3 {
        display: inline-block;
        font-size: 20px;
      }
    }

    .condition_content_content_content {
      overflow: hidden;

      .condition_content_content_content_content {
        float: left;
        width: 380px;
        margin-right: 30px;
        box-sizing: border-box;
        padding: 19px 40px;
        background-color: #fff;
        margin-bottom: 30px;

        &:nth-child(3n + 3) {
          margin-right: 0;
        }

        p {
          width: 280px;
          float: left;
          line-height: 22px;
          font-size: 16px;
          color: #333333;
        }

        img {
          float: right;
          width: 12px;
          padding: 5px 0 5px 5px;
          cursor: pointer;
          box-sizing: content-box;
        }
      }
    }

    .condition_content_content_bottom {
      margin-top: 20px;
      border-top: 1px solid #daeaf5;
      padding-top: 60px;

      .condition_content_content_bottom_content {
        text-align: center;

        span {
          display: inline-block;
          width: 140px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 18px;
          color: #ffffff;
          background-color: #44a2ff;
          cursor: pointer;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
